<template>
  <div class="iframe">
    <div class="i-title">
      <h3>reactive 响应式变化</h3>
    </div>
    <div class="i-tip">
      {{ info }}总分:{{ score }}
    </div>
    <div class="i-tip">
      <span v-for="(item, index) in sub" :key="index">{{ item }},</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 1.定义响应式数据
let score = ref(0);
let info = ref("");
let stu = reactive({
  name: "精英中学",
  grade: {
    name: "一年级",
    cls: {
      name: "3班",
      stuinfo: {
        name: "王小波",
        score: 60
      }
    }
  }
})
let sub = reactive(["语文", "数学", "英语", "生物"]);

info = stu.name + "," + stu.grade.name + "," + stu.grade.cls.name + "," + stu.grade.cls.stuinfo.name;

// 2. 对象中属性发生变化
setInterval(() => {
  score.value = stu.grade.cls.stuinfo.score++;
}, 1000)

// 3. 数组中元素发生变化
setTimeout(() => {
  sub.push("政治");
  sub[2] = "化学"
}, 2000)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
